<template>
	<view class="">
		<MyTopNav></MyTopNav>
		<el-row type="flex" justify="center">
			<el-col :span="12">
				<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
					<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in categorys"
					 :key="index" @tap="tabSelect" :data-id="item.id" :data-index="index">
						{{item.categoryName}}
					</view>
				</scroll-view>
				<view class="cu-card article" v-for="(item, index) in list" @click="gotoDetail(item.id)">
					<view class="cu-item shadow">
						<view class="title"><view class="text-cut">{{item.articleTitle}}</view></view>
						<view class="content">
							<image :src="item.articleImg"
							 mode="aspectFill"></image>
							<view class="desc">
								<view class="text-content">{{item.articleBrief}}</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="loaded ? 'nomore': 'loading'"  />
			</el-col>
		</el-row>
		
		<MyFooter />
	</view>
</template>

<script>
	
	import { articleCategory, articleList } from '@/api/cms.js'
	
	export default {
		data() {
			return {
				categorys: [],
				TabCur: 0,
				scrollLeft: 0,
			
				pageNum: 1,
				pageSize: 5,
				loaded: false,
				categoryId: 0,
				list: [],
			}
		},
		
		onLoad(options) {
			if (options.id) {
				this.categoryId = options.id;
			}
		},
		
		onShow() {
			this.getArticleCategory();
			this.getArticleList();
		},
		
		methods: {
			// 获取文章分类
			getArticleCategory() {
				articleCategory().then(res => {
					let categorys = [];
					categorys.push({id: 0, categoryName: "全部"});
					categorys = categorys.concat(res.data);
					this.categorys = categorys;
					
					for (var i = 0; i < categorys.length; i++) {
						if (categorys[i].id == this.categoryId) {
							this.TabCur = i;
						}
					}
				})
			},
			// 获取文章列表
			getArticleList() {
				if (this.loaded) {
					return;
				}
				let list = this.list;
				articleList({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					categoryId: this.categoryId == 0 ? null : this.categoryId
				}).then(res => {
					if (res.total == this.pageSize) {
						this.pageNum = this.pageNum + 1;
					} else {
						this.loaded = true;
					}
					list = list.concat(res.rows);
					this.list = list;
					
				})
			},
			
			tabSelect(e) {
				console.log(e.currentTarget.dataset.id);
				this.TabCur = e.currentTarget.dataset.index;
				this.scrollLeft = (e.currentTarget.dataset.index - 1) * 60;
				this.categoryId = e.currentTarget.dataset.id;
				this.pageNum = 1;
				this.loaded = false;
				this.list = [];
				this.getArticleList();
			},
			
			gotoDetail(id) {
				uni.navigateTo({
					url: "/pages/news/newsDetail?id=" + id
				})
			}
			
			
		},
		onReachBottom(){
			this.getArticleList();
		},
	
	}
</script>

<style>

</style>
